<template>
  <div style="height: 100%;">
    <!-- <img
      src="@/assets/login_bg.png"
      width="396px"
      height="646px"
      style="position:absolute;left:0;bottom:0;z-index:-1;"
    /> -->
    <div class="rootview">
      <img src="@/assets/logo.png" width="100px" height="100px;" style="margin-top:70px;" />
      <p class="title">Lims仓储系统</p>

      <van-field
        v-model="email"
        label="用户名"
        type="text"
        placeholder="请输入用户名"
        @input="onEmailInput"
        style="width:364px;margin:auto"
      >
        <!-- <span slot="button">{{emailSuffix}}</span> -->
      </van-field>
      <van-field
        style="width:364px;margin:auto;margin-top:30px;"
        label="密码"
        v-model="pwd"
        type="password"
        placeholder="请输入密码"
        class="pwd"
      />
      <van-button
        :disabled="disabled"
        style="margin-top:100px"
        type="default"
        size="large"
        @click="login({ Email: email, Password: pwd })"
      >登录</van-button>
    </div>
  </div>
</template>

<script>
import http from "@/utils/request";
import api from "@/utils/api";
import { mapGetters, mapActions } from "vuex";
import consts from "@/utils/consts";
import router from '@/router'
export default {
  name: "Login",
  data() {
    return {
      moveArrays:[],
      userId:'',
      disabled:true,
      email: "",
      pwd: "",
      emailSuffix: consts.emailSuffix
    };
  },
  watch:{
    email(newData){
      if(newData){
        this.disabled=false
      }else{
        this.disabled=true
      }
    },
    pwd(newData){
      if(newData){
        this.disabled=false
      }else{
        this.disabled=true
      }
    }
  },
  methods: {
    //  ...mapActions(["login"]),
    login(params) {
        const emailWithoutSuffix = params.Email;
        const EMIL = 'email'
        const PASSWORD = 'password'
        const TOKEN = 'token';
        params.Email = params.Email.indexOf(consts.emailSuffix) > -1 ? params.Email : params.Email + consts.emailSuffix
        http.fetchPost(api.login, params, "登录中...").then(data => {
            this.$store.commit('setToken', data);
            this.$store.commit('setEmail', emailWithoutSuffix);
            this.$store.commit('setPwd', params.Password);
            localStorage.setItem(EMIL, params.Email);
            localStorage.setItem(PASSWORD, params.Password);
            localStorage.setItem(TOKEN, data.data);
            if (router.history.current.query.redirect) {
                router.push({ path: router.history.current.query.redirect });
            } else {
                router.push({ path: "/navagation" });
            }
            this.getUerInfor()
        }).catch(err => {
            console.log("error msg is " + err)
        });
    },
    //获取userID
    getUerInfor(){
      http.fetchGet(api.userInfor, {}, "登录中...").then(res => {
        if(res.code === 1){
            this.userId = res.data.userId
            this.$store.commit('roleCodes', res.data.roleCodes);
            localStorage.setItem('userId',this.userId);
            var moveArrays = this.$store.state.user.moveArrays;
            if(moveArrays.length === 0){
                var obj = {
                    userId:res.data.userId,
                    moveArrays:[],
                    barCodeArray:[]
                }
                this.$store.commit('moveArrays', {obj:obj,flag:1});
            }else{
                var userArray = [];
                for(var i=0;i<moveArrays.length;i++){
                    userArray.push(moveArrays[i].userId)
                }
                if(userArray.indexOf(localStorage.getItem('userId')) > -1){

                }else{
                    var obj = {
                        userId:res.data.userId,
                        moveArrays:[],
                        barCodeArray:[]
                    }
                    this.$store.commit('moveArrays', {obj:obj,flag:1});
                }
            }

        }
      }).catch(err => {
          console.log("error msg is " + err)
      });
    },

    onEmailInput(value) {
      this.email = value.replace(/\s*/g, "");
    }
  },
  created() {
    this.email = this.$store.getters.email;
    this.pwd = this.$store.getters.password;
  }
};
</script>
<style lang="scss" scoped>
.rootview {
  // background: rgba(13, 40, 97, 0.85);
  height: 100%;
}
.title {
  font-size: 30px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: #000;
  line-height: 42px;
  padding: 0;
  margin-bottom: 71px;
  margin-top: 18px;
  text-align: center;
}
.van-field {
  background-color: transparent;
  font-size: 20px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: #000;
  line-height: 28px;
  letter-spacing: 1px;
  border-bottom: 1px solid #c8c8c8;
}
/deep/ .van-field__button {
  color: white;
  // float: right;
  align-self: flex-end;
  // flex: 0 0 auto;
  padding: 0;
}
/deep/ .van-field__control {
  color: #000;
}
/deep/ .pwd input {
  width: 100%;
}
.van-field__body {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.van-button {
  width: 364px;
  height: 54px;
  background: #2E71FF;
  border-radius: 4px;
  border: 1px solid #2E71FF;
  color: white;
  border-radius: 50px;
}
// 修改
/deep/ .van-cell{
  padding: 10px 16px 10px 0px;
}
/deep/ .van-field__label{
  text-align: left;
}
input:-internal-autofill-selected {
    background-color: #fff !important;
    background-image: none !important;
    color: rgb(0, 0, 0) !important;
}
</style>
